<!-- 店铺详情 -->
<template>
	<div style="height: 100%;background: #fff;">
		<div class="store-bg" v-if="storeInfo && storeInfo.shopId">
			<div class="store-content pt-60 pb-24">
				<div class="store-head br-8 bg-faf flex a-c j-sb pl-24 pr-32">
					<!-- 店铺头像、名称 -->
					<div class="flex a-c">
						<img v-if="storeInfo.shopImg" class="head-icon br-8" :src="storeInfo.shopImg" />
						<img v-else-if="storeInfo.channel && storeIcon[storeInfo.channel]" class="head-icon br-8" :src="require(`@/assets/images/${storeIcon[storeInfo.channel]}`)" />
						<div class="ml-24 col-1e1 f-20 lin-32">
							{{storeInfo.shopName||''}}
						</div>
					</div>
					<!-- 订阅、分享 -->
					<div class="flex a-c j-e">
						<!-- 订阅 -->
						<Button class="flex a-c j-c head-op plr-16 bg-fff c-p br-4 head-btn" :loading="loading" @click="favoriteChange">
							<div class="iconfont col-ff1" :class="storeInfo.favorite?'icon-31shoucangxuanzhong':'icon-31shoucang'"></div>
							<div class="ml-8 f-20 lin-20 col-ff1">
								{{storeInfo.favorite ? $t('store.cancelStore') : $t('store.subscribeStore')}}
							</div>
						</Button>
						<div class="ml-20 pos-r">
							<!-- 分享 -->
							<div class="flex a-c j-c head-op plr-16 bg-fff c-p br-4" @click="shareOpen">
								<img class="op-icon" src="@/assets/images/public/copy-icon.png" />
								<div class="ml-8 f-20 lin-20 col-ff1">
									{{$t('store.shareStore')}}
								</div>
							</div>
							<div class="pos-a op-share flex j-c" v-if="shareShow">
								<div class="share-div">
									<div class="br-6 share-text f-14 lin-20 col-fff t-c">
										{{$t('store.shareStoreSub1')}}<span class="ml-4 bold col-ffb">$5</span>{{$t('store.shareStoreSub2')}}
									</div>
									<div class="flex a-c j-c">
										<div class="share-label"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 列表 -->
				<div v-if="storeList.length && storeInfo.status < 10" class="store-list mt-32">
					<div 
						v-for="(item,index) in storeList" :key="index"
						>
						<store-goods-item :item="item" @viewPicture="viewPicture" itemClass="size-store"></store-goods-item>
					</div>
				</div>
				<!-- 查看更多 -->
				<div class="mt-12 flex a-c j-c pb-24" v-if="storeList.length && hasMore == 'more' && storeInfo.status < 10">
					<Button @click="moreList" class="f-16 lin-30 c-p list-more br-4 flex a-c j-c plr-16" :loading="loading">
						{{$t('goods.viewMore')}}
					</Button>
				</div>
				<!-- 店铺关闭 -->
				<div class="flex a-c j-c pt-62" v-if="storeInfo.status >= 10">
					<div class="store-empty fz-0">
						<img class="empty-icon1" src="@/assets/images/public/store-empty.png" />
						<img class="empty-icon2" src="@/assets/images/public/store-empty-icon.png" />
						<div class="t-c mt-20 col-888 f-20 lin-28">
							<div>{{$t('store.storeEmpty1')}}</div>
							<div>{{$t('store.storeEmpty2')}}</div>
						</div>
						<div class="flex j-c mt-24">
							<!-- 返回首页 -->
							<div class="flex a-c j-c empty-home br-4 plr-32 col-222 f-20 lin-20 bold c-p" @click="goHome">
								{{$t('store.storeToHome')}}
							</div>
						</div>
					</div>
				</div>
				<!-- 无列表 -->
				<div class="pt-60" v-if="storeList.length == 0 && storeInfo.status < 10 && hasMore != 'noMore'">
					<t-no-data></t-no-data>
				</div>
				<div v-if="loading">
				  <t-loading></t-loading>
				</div>
			</div>
			<store-share ref="storeRef"></store-share>
		</div>
		<Spin size="large" fix v-if="allLoading"></Spin>
	</div>
</template>

<script>
	import TNoData from "@/components/t-no-data";
	import storeShare from './components/store-share';
	import storeGoodsItem from './components/store-goods-item';
	import { infoShop,shopGoodsList } from "@/api/product";
	import { favoritesAdd,favoritesDeleteBatch } from "@/api/favorites";
	import { storeIcon } from '@/common/enum';
	import TLoading from "@/components/t-loading";
	
	export default{
		name: "store",
		data(){
			return{
				storeIcon,
				storeQuery:{
					channel:'',
					shopId:''
				},
				storeList:[],
				storeInfo:{},
				allLoading:false,
				loading:false,
				listQuery:{
					pageSize:10,
					page:1,
					channel:'',
					shopId:''
				},
				hasMore:'more',
				shareShow:true
			}
		},
		components:{
			TNoData,
			storeShare,
			storeGoodsItem,
			TLoading
		},
		computed:{
			
		},
		created() {
		  this.storeQuery.channel = this.$route.query.channel;
			this.storeQuery.shopId = this.$route.query.shopId;
			this.listQuery.channel = this.$route.query.channel;
			this.listQuery.shopId = this.$route.query.shopId;
			if(this.$route.query && this.$route.query.id){
				this.storeQuery.shopId = this.$route.query.id;
				this.listQuery.shopId = this.$route.query.id;
			}
			this.getStoreInfo(1);
		},
		methods:{
			goHome(){
				this.$router.push('/');
			},
			//分享弹窗
			shareOpen(){
				if (this.$analytics) {
				  this.$analytics.logEvent('dy_3009');
				}
				this.$refs.storeRef.open();
			},
			// 查看图片
			viewPicture(images) {
				this.$viewerApi({
					images: images,
					options: {
						initialViewIndex: 0,
					},
				});
			},
			//获取店铺详情
			getStoreInfo(type = 1){
				if(type == 1){
					this.allLoading = true;
				}
				this.loading = true;
				infoShop(this.storeQuery).then(res => {
					this.allLoading = false;
					this.loading = false;
					this.storeInfo = res.result;
					if(res.result.status < 10){
						this.getShopGoodsList();
					}
					if(this.shareShow){
						setTimeout(() => {
							this.shareShow = false;
						},5000)
					}
				}).catch(() => {
					this.allLoading = false;
					this.loading = false;
				})
			},
			//获取店铺下的商品列表
			getShopGoodsList(){
				this.loading = true;
				shopGoodsList(this.listQuery).then(res => {
					this.loading = false;
					this.hasMore = res.result.data.length < this.listQuery.pageSize ? 'noData' : 'more';
					this.storeList = this.listQuery.page == 1 ? res.result.data : this.storeList.concat(res.result.data);
				}).catch(() => {
					this.loading = false;
				})
			},
			//订阅与取消
			favoriteChange(){
				if(this.storeInfo.favorite){
					this.storeDel();
				}else{
					this.storeAdd();
				}
			},
			//收藏
			storeAdd(){
				let data = {
					channel:this.storeInfo.channel,
					targetId:this.storeInfo.shopId,
					type:'shop',
					subject:this.storeInfo.shopName,
					mainImage:this.storeInfo.shopImg,
					detailUrl:this.storeInfo.shopUrl
				}
				this.loading = true;
				favoritesAdd(data).then(res => {
					if (this.$analytics) {
					  this.$analytics.logEvent('dy_3007');
					}
					this.loading = false;
					this.listQuery.page = 1;
					this.getStoreInfo(2);
					this.$Message.success(this.$t('store.storeSuccess'));
				}).catch(() => {
					this.loading = false;
				})
			},
			//取消收藏
			storeDel(){
				this.loading = true;
				favoritesDeleteBatch([this.storeInfo.shopId],'shop').then(res => {
					if (this.$analytics) {
					  this.$analytics.logEvent('dy_3008');
					}
					this.loading = false;
					this.storeInfo.favorite = '';
					this.$Message.success(this.$t('store.storeFail'));
				}).catch(() => {
					this.loading = false;
				})
			},
			//点击更多
			moreList(){
				if(this.hasMore == 'more'){
					this.listQuery.page ++;
					this.getShopGoodsList();
				}
			},
		}
	}
</script>

<style scoped lang="less">
	.store-bg{
		background: #fff !important;
		height: 100%;
		.store-content{
			width: 1600px;
			margin: auto;
			.store-head{
				box-sizing: border-box;
				height: 108px;
				border: 1px solid #F1F1F1;
				.head-icon{
					width: 68px;
					height: 68px;
				}
				.head-op{
					height: 44px;
					border: 1px solid #EDEDED;
					box-sizing: border-box;
					.op-icon{
						width: 20px;
						height: 20px;
					}
					.iconfont{
						font-size: 22px;
						line-height: 22px;
					}
				}
				.head-btn{
					/deep/ span{
						display:flex !important;
						justify-content: center;
						align-items: center;
					}
				}
				/deep/ .head-btn:focus{
					box-shadow:none !important;
				}
				.op-share{
					bottom: 44px;
					left: 0;
					right: 0;
					margin: auto;
					.share-div{
						.share-text{
							width: 270px;
							background: rgba(0, 0, 0, 0.71);
							box-sizing: border-box;
							padding: 10px 16px;
						}
						.share-label{
							width: 0;
							height: 0;
							border-top: 10px solid rgba(0, 0, 0, 0.71);
							border-left: 10px solid transparent;
							border-right: 10px solid transparent;
							border-bottom: 10px solid transparent;
						}
					}
				}
			}
			.store-empty{
				padding-bottom: 100px;
				.empty-icon1{
					width: 240px;
					height: 240px;
					display: block;
					margin: auto;
				}
				.empty-icon2{
					width: 84px;
					height: 26px;
					display: block;
					margin: auto;
					margin-top: 20;
				}
				.empty-home{
					min-width: 240px;
					height: 68px;
					box-sizing: border-box;
					border: 1px solid #222;
				}
			}
			.store-list{
				display: grid;
				grid-template-columns:repeat(5, 1fr);
				gap: 12px;
			}
			.list-more{
				min-width: 320px;
				height: 48px;
				border: 1px solid #F1F1F1;
				&:hover{
					color:#FF186B;
					border-color:#FF186B;
				}
				&:focus{
					box-shadow:none;
				}
			}
		}
	}
</style>